<template>
  <div>
    <span @click="onClick(index)" v-for="(item,index) in list" :key="index">
      <el-badge :value="index+1<10?'0'+(index+1):index+1" :type="getType(index)" class="item"></el-badge>
    </span>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  methods: {
    ...mapMutations("questions", ["SET_NUM"]),
    onClick(val) {
      this.SET_NUM(val);
    },
    getType(val) {
      let type = "info";
      let isList = this.list[val].isanswers;
      if (isList && isList != "[]") {
        if (this.list[val].answers == isList) {
          type = "success";
        } else {
          type = "danger";
        }
      } else {
        type = "info";
      }

      if (val == this.nums) {
        type = "primary";
      }
      // console.log(this.list[val]);
      return type;
    }
  },
  mounted() {
    console.log(this.$parent);
  },
  computed: {
    ...mapState("questions", ["num"]),
    nums() {
      return this.num;
    },
    list() {
      return this.$parent.checkedList;
    }
  },
  watch: {
    list: {
      deep: true,
      handler(newVal, oldVal) {
        // console.log(newVal);
        // console.log(oldVal);
      },
      immediate: true
    }
  }
};
</script>

<style scoped>
.el-badge {
  cursor: pointer;
}
</style>